const Magnifier = {
    setup(props, context){
        // 参数1：表示组件在props选项中定义的数据
        // 参数2：表示当前组件的实例对象

        // 详情数据
        const detailData = reactive({});
        // 是否显示遮罩层和大图
        const isShow = ref(false);
        // 鼠标移动的距离（要设置给遮罩的位置）
        const x = ref(0);
        const y = ref(0);
        // 遮罩层的宽高
        const spanW = ref(220);
        const spanH = ref(210);
        // 左侧容器的宽高
        const sBoxW = ref(420);
        const sBoxH = ref(420);
        // 右侧容器的宽高
        const bBoxW = ref(420);
        const bBoxH = ref(420);
        // 右侧大图的宽高
        const bImgW = ref(800);
        const bImgH = ref(800);
        // 右侧大图的位置
        const bImgX = ref(0);
        const bImgY = ref(0);

        // 侦听父组件传入的数据的变化
        watchEffect(()=>{
            detailData.goodsImg = props.d.goodsImg;
            detailData.goodsName = props.d.goodsName;
            detailData.price = props.d.price;
            detailData.sale = props.d.sale;
            detailData.stock = props.d.stock;
        })

        // 显示
        function show(){
            isShow.value = true
        }
        // 隐藏
        function hide(){
            isShow.value = false
        }
        // 移动
        function move(e){
            let l = e.offsetX - spanW.value/2;
            let t = e.offsetY - spanH.value/2;

            if(l <= 0) l=0;
            if(t <= 0) t=0;
            if(l > sBoxW.value-spanW.value){
                l = sBoxW.value-spanW.value
            }
            if(t > sBoxH.value-spanH.value){
                t = sBoxH.value-spanH.value
            }

            bImgX.value = l / (sBoxW.value-spanW.value) * (bBoxW.value-bImgW.value) + "px";
            bImgY.value = t / (sBoxH.value-spanH.value) * (bBoxH.value-bImgH.value) + "px";

            x.value = l + "px";
            y.value = t + "px";
        }

        return { detailData, show, hide, move, isShow, x, y, spanW, spanH, sBoxW, sBoxH, bBoxW, bBoxH, bImgX, bImgY, bImgW, bImgH };
    },
    props:["d"],
    template:`<div class="magnifier-wrap fl">
        <div class="smallimg-box" @mouseenter="show" @mouseleave="hide" @mousemove="move" :style="{width:sBoxW, height:sBoxH}">
            <img :src="detailData.goodsImg" alt="">
            <span v-show="isShow" :style="{left:x, top:y, width:spanW, height:spanH}"></span>
        </div>
        <div class="magnifier-banner-wrap">
            <ul>
                <li>
                    <img :src="detailData.goodsImg" alt="">
                </li>
                <li>
                    <img :src="detailData.goodsImg" alt="">
                </li>
            </ul>
        </div>
        <div class="btn">
            <input type="button" class="iconfont" value="&#xe603;" id="left">
            <input type="button" class="iconfont" value="&#xe629;" id="right">
        </div>
        <div class="share">
            <a href="#">
                <i class="iconfont">&#xe62a;</i>
                <span>收藏商品&nbsp;&nbsp;（31036人气）</span>
            </a>
            <a href="#">举报</a>
        </div>
    </div>
    <div class="bigimg-box" v-show="isShow" :style="{width:bBoxW,height:bBoxH}">
        <img :src="detailData.goodsImg"  alt="" :style="{left:bImgX, top:bImgY, width:bImgW, height: bImgH}">
    </div>`
}